<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <!-- v-bind:  简写为: -->
    <!-- v-on:click 简写为 @click -->

    <div id="app">
      <p :title="msg">{{msg}}</p>
      <div v-bind:title="`http://127.0.0.1:5500/04-vue-base/02${url}`"></div>

      <ol>
        <li v-for="l in str">{{l}}</li>
      </ol>

      <!-- <button v-on:click="clickHandler">toggle</button> -->
      <button @click="seen=!seen">toggle</button>

      <div v-if="seen">box</div>

      <input type="text" v-model="msg" />
      <user-gretting name="nick"></user-gretting>
      <user-gretting name="nicholas" v-bind:age="17"></user-gretting>
      <user-gretting v-bind:name="msg"></user-gretting>

      <ol>
        <user-gretting v-for="l in str" :name="l"></user-gretting>
      </ol>
      <hr />
    </div>
    <script>
      // html xhtml 组件名 必须小写
      //   h1 mark ruby 尽量不要用单个单词 而是用 xx-yy 自定义标签
      Vue.component("user-gretting", {
        props: ["name"],
        template: "<p>子组件{{name}}</p>",
      });

      var app = new Vue({
        el: "#app",
        data: {
          msg: "hello world",
          url: "/banner1.jpg",
          seen: true,
          str: "hello",
        },
        methods: {
          //   clickHandler: function () {
          //     this.seen = !this.seen;
          //   },
        },
      });
    </script>
  </body>
</html>
